import config from '@/config'
import { getLightColor } from '@/utils/color'
export class Theme {
  /**
   * @description 常见使用场景
   * 半透明按钮
   * color: var(--color-primary)
   * background-color: var(--color-primary-light-9)
   * border-color: var(--color-primary-light-5)
   *
   * 不透明按钮
   * color: #fff;
   * background-color: var(--color-primary);
   * border-color: var(--color-primary);
   *
   * 第三方开源使用案列
   * --el-button-text-color: var(--el-color-primary);
   * --el-button-bg-color: var(--el-color-primary-light-9);
   * --el-button-border-color: var(--el-color-primary-light-5);
   * --el-button-hover-text-color: var(--el-color-white);
   * --el-button-hover-bg-color: var(--el-color-primary);
   * --el-button-hover-border-color: var(--el-color-primary);
   * --el-button-active-text-color: var(--el-color-white);
  */
  changePrimary = (val) => {
    if (!val) {
      val = config.defaultPrimary
    }
    document.documentElement.style.setProperty('--color-primary', val)
    for (let i = 1; i <= 9; i++) {
      const primaryColor = `${getLightColor(val, i / 10)}`
      document.documentElement.style.setProperty(`--color-primary-light-${i}`, primaryColor)
    }
  }
}
